<template>
  <el-card class="form-container" shadow="never">
    <el-tree
      :data="menuTreeList"
      show-checkbox
      default-expand-all
      node-key="name"
      ref="tree"
      :default-checked-keys="['admin']"
      highlight-current
      :props="defaultProps">
    </el-tree>
    <div style="margin-top: 20px" align="center">
      <el-button type="primary" @click="handleSave()">保存</el-button>
      <el-button @click="handleClear()">清空</el-button>
    </div>

  </el-card>
</template>

<script>
  // import {fetchTreeList} from '@/api/menu';
  import {listMenuByRole,allocMenu} from '@/api/role';
import { asyncRouterMap } from '@/router/index';
  export default {
    name: "allocMenu",
    data() {
      return {
        menuTreeList: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        roleId:null,
        noMenus:[],
        menuList:'',
      };
    },
    created() {
      this.roleId = this.$route.query.roleId;
      
      this.getRoleMenu(this.roleId);
     
      
    },
    mounted(){
      
    },
    updated(){
      console.log(this.menuList);
      this.$refs.tree.setCheckedKeys(this.menuList);
    },
    methods: {
      treeList() {
 //第一层，过滤掉隐藏的
      let accessedRouters = asyncRouterMap.filter(v => {
        if (v.hidden) {
          return false
        } else {
          if (v.children && v.children.length > 0) {
            v.children = v.children.filter(child => {
            if (child.hidden) {
              return false
            }
            child.label = child.meta.title;
            return child;
          });
          }
          v.label = v.meta.title;
          return v
        }
      });
      //第二层
      // const accessedRouters2 = asyncRouterMap.filter(v => {
      //   if (v.children && v.children.length > 0) {
      //     v.children = v.children.filter(child => {
      //       if (hasPermission(menus, child)) {
      //         return child
      //       }
      //       return false;
      //     });
      //     return v
      //   } else {
      //     return v
      //   }
      // });
      //第二层，过滤掉未授权的
      console.log(this.noMenus);
      let accessedRouters2 = accessedRouters.filter(v => {
            if(this.noMenus.includes(v.name)){
              return false;
            }
            return v;
      });
      console.log(accessedRouters);
      console.log(accessedRouters2);
      this.menuTreeList = accessedRouters2;
      
      },
      getRoleMenu(roleId){
        listMenuByRole(roleId).then(response=>{
          // let menuList = response.data;
          // let checkedMenuIds=[];
          // if(menuList!=null&&menuList.length>0){
          //   for(let i=0;i<menuList.length;i++){
          //     let menu = menuList[i];
          //     if(menu.parentId!==0){
          //       checkedMenuIds.push(menu.id);
          //     }
          //   }
          // }
          // this.$refs.tree.setCheckedKeys(checkedMenuIds);
          this.menuList = response.data.menuCodes;
          this.noMenus = response.data.noMenus;
          console.log(this.menuList);
          console.log(this.noMenus);
          this.treeList();
          
        });
      },
      handleSave() {
        let checkedNodes = this.$refs.tree.getCheckedNodes();
        let checkedMenuCodes=new Set();
        // if(checkedNodes!=null&&checkedNodes.length>0){
        //   for(let i=0;i<checkedNodes.length;i++){
        //     let checkedNode = checkedNodes[i];
        //     checkedMenuIds.add(checkedNode.id);
        //     if(checkedNode.parentId!==0){
        //       checkedMenuIds.add(checkedNode.parentId);
        //     }
        //   }
        // }
        if(checkedNodes!=null&&checkedNodes.length>0){
          for(let i=0;i<checkedNodes.length;i++){
            let checkedNode = checkedNodes[i];
            checkedMenuCodes.add(checkedNode.name);
          }
        }
        this.$confirm('是否分配菜单？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          let params = new URLSearchParams();
          params.append("roleId",this.roleId);
          params.append("menuCodes",Array.from(checkedMenuCodes));
          allocMenu(params).then(response => {
            this.$message({
              message: '分配成功',
              type: 'success',
              duration: 1000
            });
            this.$router.back();
          })
        })
      },
      handleClear() {
        this.$refs.tree.setCheckedKeys([]);
      }
    }
  }
</script>

<style scoped>

</style>
